<template>
  <ui-page ref="uiPageRef" @scroll="scroll" @scrolltolower="scrolltolower">
    <view class="content">
      <biz-switch-env-config ref="bizSwitchEnvConfigRef" />
      <image class="logo" src="../../static/logo.png"></image>
      <u-skeleton rows="3" :title="false" loading> </u-skeleton>
      <u-button>{{
        `登陆状态---   ${store.isLogin ? '已登陆' : '未登录'}`
      }}</u-button>

      <u-button @click="click">切换环境</u-button>
      <u-button @click="getUrl">查询当前接口地址</u-button>
      <u-button @click="getList">发起请求</u-button>
      <u-button @click="go(1)">跳转页面</u-button>
      <u-button @click="go(2)">跳转页面传参数</u-button>
      <u-button @click="go(3)">跳转页面传参数</u-button>
      <u-button @click="go(4)">重定向当前页(带参)</u-button>
      <u-button @click="login">登陆失效</u-button>
      <u-button @click="store.addCount">{{ `pinia(${store.count})` }}</u-button>

      <u-button @click="click">切换环境</u-button>
      <u-button @click="getUrl">查询当前接口地址</u-button>

      <view style="padding: 20px">
        <u-button type="primary" text="确定"></u-button>
        <u-button type="primary" :plain="true" text="镂空"></u-button>
        <u-button
          type="primary"
          :plain="true"
          :hairline="true"
          text="细边"
        ></u-button>
        <u-button type="primary" :disabled="disabled" text="禁用"></u-button>
        <u-button type="primary" loading loadingText="加载中"></u-button>
        <u-button type="primary" icon="map" text="图标按钮"></u-button>
        <u-button type="primary" shape="circle" text="按钮形状"></u-button>
        <u-button
          text="渐变色按钮"
          color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
        ></u-button>
        <u-button type="primary" size="small" text="大小尺寸"></u-button>
      </view>
    </view>
  </ui-page>
</template>

<script setup>
import { ApiUrl } from '@/config/api'
import { ENV } from '@/config'
import { usePageCycle, uiPageRef } from '@/composables/global.js'
const store = uni.$store('user/useUserStore')

usePageCycle()
// let store = useUserStore()

const scroll = (e) => {
  console.log('滚动监听', e)
}

const disabled = ref(true)

const scrolltolower = (e) => {
  console.log('触底监听', e)
}
const login = () => {
  uni.$emit('needLogin', true)
  console.log(uni.$getCurRouter())
}

// 跳转传参
const go = (e) => {
  let go = uni.$navTo
  let fun = {
    1: () => go(2, 'pages/index1/index1'),
    2: () => go(2, { path: 'pages/index1/index1', query: { data: 999 } }),
    3: () => go(2, 'pages/index2/index2?data=8888'),
    4: () => uni.$navToCurrentPage({ data: 999 })
  }
  fun[e]()
}

const getList = () => {
  uni.$Api.fetchUserInfo()
}

const bizSwitchEnvConfigRef = ref()

const click = () => {
  uiPageRef.value.getRef('toast').then((e) => {
    e.openSetEnv()
  })
}

const getUrl = () => {
  console.log(
    `%c 编译环境::::::  %c  ${ENV}  %c 切换的接口地址::::::  %c ${ApiUrl}`,
    'color: #ffffff; background: #3c9cff; padding:5px 0;',
    'padding:5px 0;',
    'color: #ffffff; background: #3c9cff; padding:5px 0;',
    'padding:5px 0;'
  )
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
